<template>
	<div class="MV">
		<div class="nav-head"><img src="../../../../assets/icon-return45.png" @click="ToBackPage"><div class="title">MV</div></div>
		<div class="top-blank"></div>
		<div class="MV-wraper">
			<div class="mv-play">
				<div class="mv-cover">
					<img src="../../../../assets/mv-pic1.png" class="bgimg">
					<img src="../../../../assets/icon-stop60.png" class="stopimg">
				</div>
				<div class="mv-info">
					<div class="mv-message">
						<p class="mv-name">小情歌MV</p>
						<p class="mv-singer">苏打绿</p>
						<p class="mv-count">播放量 <span>212万</span>次</p>
					</div>
					<div class="mv-love-share-pl">
						<div class="like-btn"><img src="../../../../assets/icon-like32.png" class="like"> <span class="like-count">35</span></div>
						<div class="talk-btn"><img src="../../../../assets/icon-talk@2x32.png" class="talk"> <span class="talk-count">456</span></div>
						<div class="share-btn"><img src="../../../../assets/icon-share@2x32.png" class="share"> <span class="share-count">56</span></div>
					</div>
				</div>
			</div>
			<div class="mv-list-wraper">
				<h2>大部分人还爱看</h2>
				<div class="mv-list">
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div class="mlr15">
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div class="mlr15">
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div class="mlr15">
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
					<div>
						<img src="../../../../assets/4240 (2).png" class="img1">
						<img src="../../../../assets/incon-stop-60.png" class="img2">
					</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"MV",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ToBackPage(){
				window.history.back();
			}
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}	
.MV-wraper{
	width: 100%;
	background-color: #dbd7df;
	.mv-play{
		width: 100%;
		background-color:#fff;
		margin-bottom: 20 / 100rem;
		.mv-cover{
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 350 / 100rem;
			.bgimg{
				width: 100%;
			}
			.stopimg{
				position: absolute;
				bottom: 20 / 100rem;
				right: 20 / 100rem;
				width: 60 / 100rem;
			}
		}
		.mv-info{
			overflow: hidden;
			width: 100%;
			.mv-message{
				float: left;
				padding-left: 20 / 100rem;
				font-size: 24 / 100rem;
				.mv-name{
					padding-top: 20 / 100rem;
					padding-bottom: 14 / 100rem;
				}
				.mv-count{
					padding-top: 14 / 100rem;
					padding-bottom: 23 / 100rem;
				}
			}
			.mv-love-share-pl{
				float: right;
				width: 270 / 100rem;
				overflow: hidden;
				padding-top: 20 / 100rem;
				.like-btn{
					float: left;
					width: 90 / 100rem;
					img{
						height: 32 / 100rem;
						vertical-align: middle;
					}
					span{
						font-size: 24 / 100rem;
					}
				}
				.talk-btn{
					float: left;
					width: 90 / 100rem;
					img{
						height: 32 / 100rem;
						vertical-align: middle;
					}
					span{
						font-size: 24 / 100rem;
					}
				}
				.share-btn{
					float: left;
					width: 90 / 100rem;
					img{
						height: 32 / 100rem;
						vertical-align: middle;
					}
					span{
						font-size: 24 / 100rem;
					}
				}
			}
		}
	}
	.mv-list-wraper{
		background-color: #fff;
		width: 100%;
		h2{
			padding-left: 20 / 100rem;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 29 / 100rem;
		}
		.mv-list{
			width: 100%;
			overflow: hidden;
			div{
				float: left;
				width: 240 / 100rem;
				position: relative;
				.img1{
					width: 100%;
				}
				.img2{
					position: absolute;
					width: 60 / 100rem;
					bottom: 10 / 100rem;
					right: 9 / 100rem;
				}
			}
		}
	}
}
.mlr15{
	margin-left: 15 / 100rem;
	margin-right: 15 / 100rem;
}
</style>